import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue'
// import father from '../views/father.vue'
import a from '../views/a.vue'
// import b from '../views/b.vue'
import siblingPasValue from '../views/siblingPassValue.vue'
import hs from '../views/hs.vue'
import basic from './basic'
import css from './css'
import js from './js'
import otherRouter from './other'
import useComponent from './useComponent'
// import vSlot from "./v-sot"
Vue.use(VueRouter)

const routes = [
	{
		path: '/',
		redirect: '/home'
	},
	{
		path: '/home',
		component: () => import('@/views/Home')
	},
	{
		path: '/table',
		component: () => import('@/views/table/index.vue')
	},
	{
		path: '/gutter',
		component: () => import('@/views/gutter/index.vue')
	},
	{
		path: '/form',
		name: 'form',
		component: () => import('@/views/form')
	},
	{
		path: '/async_v_model',
		name: 'async_v_model',
		component: () => import('@/views/async_v_model')
	},
	{
		path: '/vSlot',
		name: 'vSlot',
		component: () => import('@/views/v-slot')
	},
	{
		path: '/jsx',
		name: 'jsx',
		component: () => import('@/views/JSX')
	},
	...basic,
	...css,
	...js,
	...otherRouter,
	...useComponent,
	{
		path: '/siblingPassValue/:id',
		name: 'siblingPassValue',
		component: siblingPasValue
	},
	// {
	//   path: '/home',
	//   name: 'Home',
	//   component: Home,
	//   props: true
	// },
	{
		path: '/hs',
		name: 'hs',
		component: hs,
		children: [
			{ path: '/hs/a', component: a }
			// { path: '/hs/b/:uid', component: b }
		]
	},

	{
		path: '/about/:id',
		name: 'About',
		props: true,
		component: () => import('../views/About.vue')
	},
	{
		path: '/vueColor',
		name: 'vueColor',
		component: () => import('../views/vueColor/index.vue')
	}
]

const router = new VueRouter({
	mode: 'history',
	base: process.env.BASE_URL,
	routes
})
router.beforeEach((to, from, next) => {
	if (to.meta.title) {
		document.title = to.meta.title
	}
	next()
})
export default router
